<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.get("/getAll",function (mess) {
                show(mess);
            });

            $.get("/getAllMgr",function (mess) {
                eval("var emps="+mess);
                $("[id=mgr]").empty();
                $("<option value='0'>--请选择--</option>").appendTo("[id=mgr]")
                for (var i=0;i<emps.length;i++){
                    $("<option value='"+emps[i].mgr+"'>"+emps[i].ename+"</option>").appendTo("[id=mgr]")
                }
            });

            $(document).on("click","[name=del]",function () {
                var empno=$(this).attr("id");
                $.get("/del","empno="+empno,function (mess) {
                    show(mess)
                })
            })

            $("[id=select]").click(function () {
                select(1)
            })
            $("[id=empno]").blur(function () {
                select(1)
            })
            $("[id=ename]").blur(function () {
               select(1)
            })
            $("[id=mgr]").blur(function () {
                select(1)
            })

            $(document).on("click","a",function () {
                var indexPage=$(this).attr("id");
                select(indexPage)
            })
        });

        function select(indexPage) {
            var mgr=$("[id=mgr]").val();
            var empno=$("[id=empno]").val();
            var ename=$("[id=ename]").val();
            $.get("/select",{
                "indexPage":indexPage,
                "empno":empno,
                "ename":ename,
                "mgr":mgr
            },function (mess) {
                show(mess)
            })
        }

        function show(mess) {
        JSON.stringify(mess)
        $("tbody").empty();
        var emps=mess.data.list;
        for (var i=0;i<emps.length;i++){
            $("<tr>"+
                "<td>"+emps[i].empno+"</td>"+
                "<td>"+emps[i].ename+"</td>"+
                "<td>"+emps[i].job+"</td>"+
                "<td>"+emps[i].sal+"</td>"+
                "<td>"+emps[i].mgr+"</td>"+
                "<td><b id='"+emps[i].empno+"'name='del'>删除</b><b>修改</b></td>"+
                "</tr>").appendTo("tbody");
        }
        $("#div").empty();
        if (!mess.data.isFirstPage){
            $("<a id='1'>首页</a><a id='"+mess.data.prePage+"'>上一页<a/>").appendTo("#div")
        }
        if (!mess.data.isLastPage){
            $("<a id='"+mess.data.nextPage+"'>下一页<a/><a id='"+mess.data.pages+"'>尾页</a>").appendTo("#div")
        }
        }

    </script>
    <!--<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            alert("123");
            $.get("/getAll",function (mess) {
                alert(mess);
                eval("var emps="+mess);
                for (var i=0;i<emps.length;i++){
                    $("<tr>"+
                    "<td>"+emps[i].empno+"</td>"+
                    "<td>"+emps[i].ename+"</td>"+
                    "<td>"+emps[i].job+"</td>"+
                    "<td>"+emps[i].sal+"</td>"+
                    "</tr>").appendTo("tbody")
                }
            })
        })
    </script>-->
</head>
<body>

    员工编号:<input type="text" id="empno">
    员工姓名<input type="text" id="ename">
    <select id="mgr">
        <option value="0">--请选择--</option>
    </select>
    <input type="button" id="select" value="查询">


<table border="1px">
    <thead>
    <tr>
        <td>员工编号</td>
        <td>员工姓名</td>
        <td>岗位</td>
        <td>工资</td>
        <td>经理编号</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>

    </tbody>
 <!--   <tr th:each="emp:${list}">
        <td th:text="${emp.empno}"></td>
        <td th:text="${emp.ename}"></td>
        <td th:text="${emp.job}"></td>
        <td th:text="${emp.sal}"></td>
        <td><a>删除</a><a>修改</a></td>
    </tr>-->
</table>
<div id="div"></div>
</body>
</html>